<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Harmony - 本地音乐管理播放平台</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <script src="app.js"></script>
  <link href="styles.css" rel="stylesheet">
</head>
<body class="bg-neutral-100 font-inter text-neutral-800 min-h-screen flex flex-col">
  <!-- 顶部导航栏 -->
  <header class="bg-white shadow-sm sticky top-0 z-50 transition-all duration-300" id="header">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
      <div class="flex items-center space-x-2">
        <div class="text-primary text-2xl">
          <i class="fa-solid fa-music"></i>
        </div>
        <h1 class="text-xl font-bold text-primary">Harmony</h1>
      </div>
      
      <div class="hidden md:flex items-center space-x-6">
        <a href="#" class="font-medium text-primary border-b-2 border-primary px-1 py-4">音乐库</a>
        <a href="#" class="font-medium text-neutral-600 hover:text-primary transition-colors px-1 py-4">播放列表</a>
        <a href="#" class="font-medium text-neutral-600 hover:text-primary transition-colors px-1 py-4">艺术家</a>
        <a href="#" class="font-medium text-neutral-600 hover:text-primary transition-colors px-1 py-4">专辑</a>
      </div>
      
      <div class="flex items-center space-x-4">
        <div class="relative hidden md:block">
          <input type="text" placeholder="搜索音乐、艺术家或专辑..." class="pl-10 pr-4 py-2 rounded-full bg-neutral-100 text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 w-64 transition-all">
          <i class="fa-solid fa-search absolute left-3 top-1/2 -translate-y-1/2 text-neutral-500"></i>
        </div>
        
        <button id="theme-toggle" class="p-2 rounded-full hover:bg-neutral-100 transition-colors">
          <i class="fa-regular fa-moon text-neutral-700"></i>
        </button>
        
        <button id="mobile-menu-button" class="md:hidden p-2 rounded-full hover:bg-neutral-100 transition-colors">
          <i class="fa-solid fa-bars text-neutral-700"></i>
        </button>
      </div>
    </div>
    
    <!-- 移动端菜单 -->
    <div id="mobile-menu" class="md:hidden hidden bg-white border-t border-neutral-200 animate-fade-in">
      <div class="container mx-auto px-4 py-2">
        <a href="#" class="block py-3 px-2 font-medium text-primary border-l-4 border-primary">音乐库</a>
        <a href="#" class="block py-3 px-2 font-medium text-neutral-600 hover:text-primary hover:bg-neutral-50 transition-colors">播放列表</a>
        <a href="#" class="block py-3 px-2 font-medium text-neutral-600 hover:text-primary hover:bg-neutral-50 transition-colors">艺术家</a>
        <a href="#" class="block py-3 px-2 font-medium text-neutral-600 hover:text-primary hover:bg-neutral-50 transition-colors">专辑</a>
        <div class="relative mt-3 mb-2">
          <input type="text" placeholder="搜索音乐..." class="pl-10 pr-4 py-2 rounded-full bg-neutral-100 text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 w-full">
          <i class="fa-solid fa-search absolute left-3 top-1/2 -translate-y-1/2 text-neutral-500"></i>
        </div>
      </div>
    </div>
  </header>

  <!-- 主内容区 -->
  <main class="flex-grow container mx-auto px-4 py-6 flex flex-col md:flex-row gap-6">
    <!-- 侧边栏 -->
    <aside class="md:w-1/5 lg:w-1/6 space-y-6">
      <!-- 目录选择区域 -->
      <div class="bg-white rounded-xl shadow-card p-5 animate-fade-in">
        <h2 class="text-lg font-semibold mb-4 flex items-center">
          <i class="fa-solid fa-folder-open text-primary mr-2"></i>
          音乐目录
        </h2>
        <div class="space-y-3">
          <button id="select-folder-btn" class="w-full py-2.5 px-4 bg-primary text-white rounded-lg font-medium hover:bg-primary/90 transition-all flex items-center justify-center space-x-2 shadow-sm hover:shadow">
            <i class="fa-solid fa-plus"></i>
            <span>选择音乐目录</span>
          </button>
          
          <div id="selected-folder" class="hidden">
            <div class="bg-neutral-50 rounded-lg p-3 text-sm border border-neutral-200">
              <div class="font-medium text-neutral-700 mb-1">当前目录</div>
              <div id="folder-path" class="text-neutral-600 truncate">/path/to/your/music</div>
            </div>
          </div>
          
          <!-- 新增：文件拖放区域 -->
          <div id="file-drop-area" class="border-2 border-dashed border-neutral-300 rounded-lg p-4 text-center hover:border-primary transition-colors cursor-pointer mt-2">
            <p class="text-sm text-neutral-600 mb-1">或拖放音乐文件到此处</p>
            <div class="flex justify-center space-x-2">
              <span class="text-xs text-neutral-500">支持格式：</span>
              <span class="text-xs text-neutral-500">MP3</span>
              <span class="text-xs text-neutral-500">•</span>
              <span class="text-xs text-neutral-500">WAV</span>
              <span class="text-xs text-neutral-500">•</span>
              <span class="text-xs text-neutral-500">FLAC</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 播放列表 -->
      <div class="bg-white rounded-xl shadow-card p-5 animate-fade-in" style="animation-delay: 0.1s">
        <h2 class="text-lg font-semibold mb-4 flex items-center">
          <i class="fa-solid fa-list text-primary mr-2"></i>
          播放列表
        </h2>
        <div class="space-y-2 max-h-60 overflow-y-auto scrollbar-hide">
          <div class="flex items-center justify-between playlist-item cursor-pointer" data-playlist="all">
            <div class="flex items-center space-x-2">
              <div class="w-8 h-8 rounded bg-primary/10 flex items-center justify-center text-primary">
                <i class="fa-solid fa-music text-sm"></i>
              </div>
              <span class="font-medium text-sm">所有音乐</span>
            </div>
            <span class="text-xs text-neutral-500">0</span>
          </div>
          
          <div class="flex items-center justify-between playlist-item cursor-pointer" data-playlist="favorites">
            <div class="flex items-center space-x-2">
              <div class="w-8 h-8 rounded bg-secondary/10 flex items-center justify-center text-secondary">
                <i class="fa-solid fa-heart text-sm"></i>
              </div>
              <span class="font-medium text-sm">喜欢的音乐</span>
            </div>
            <span class="text-xs text-neutral-500">0</span>
          </div>
          
          <div class="flex items-center justify-between playlist-item cursor-pointer" data-playlist="recent">
            <div class="flex items-center space-x-2">
              <div class="w-8 h-8 rounded bg-neutral-100 flex items-center justify-center text-neutral-600">
                <i class="fa-solid fa-headphones text-sm"></i>
              </div>
              <span class="font-medium text-sm">最近播放</span>
            </div>
            <span class="text-xs text-neutral-500">0</span>
          </div>
          
          <button id="new-playlist-btn" class="w-full py-2 text-sm text-neutral-600 hover:text-primary transition-colors flex items-center justify-center">
            <i class="fa-solid fa-plus-circle mr-1"></i>
            <span>新建播放列表</span>
          </button>
        </div>
      </div>
      
      <!-- 艺术家 -->
      <div class="bg-white rounded-xl shadow-card p-5 animate-fade-in" style="animation-delay: 0.2s">
        <h2 class="text-lg font-semibold mb-4 flex items-center">
          <i class="fa-solid fa-user text-primary mr-2"></i>
          热门艺术家
        </h2>
        <div class="space-y-3">
          <div class="text-sm text-neutral-500 italic">
            暂无艺术家数据
          </div>
        </div>
      </div>
    </aside>
    
    <!-- 音乐内容区 -->
    <section class="md:w-4/5 lg:w-5/6 space-y-6">
      <!-- 欢迎区域 -->
      <div class="bg-gradient-to-r from-primary/90 to-secondary/90 rounded-2xl p-6 text-white shadow-lg animate-fade-in">
        <div class="flex flex-col md:flex-row items-center justify-between">
          <div class="mb-6 md:mb-0">
            <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-shadow mb-2">欢迎使用Harmony</h2>
            <p class="text-white/80 mb-4 max-w-lg">请选择本地音乐目录或拖放音乐文件，开始享受你的私人音乐库</p>
            <div class="flex flex-wrap gap-3">
              <button id="shuffle-play-btn" class="py-2.5 px-5 bg-white text-primary rounded-lg font-medium hover:bg-neutral-100 transition-all shadow-sm hover:shadow flex items-center space-x-2 opacity-50 cursor-not-allowed">
                <i class="fa-solid fa-shuffle"></i>
                <span>随机播放</span>
              </button>
              <button id="recent-play-btn" class="py-2.5 px-5 bg-white/20 backdrop-blur-sm text-white rounded-lg font-medium hover:bg-white/30 transition-all flex items-center space-x-2 opacity-50 cursor-not-allowed">
                <i class="fa-solid fa-clock-rotate-left"></i>
                <span>最近播放</span>
              </button>
            </div>
          </div>
          <div class="relative w-full md:w-64 h-64 md:h-auto hidden md:block">
            <img src="https://picsum.photos/400/400?random=10" alt="音乐" class="w-full h-full object-cover rounded-xl shadow-lg">
            <div class="absolute inset-0 bg-black/40 rounded-xl flex items-center justify-center">
              <div class="text-center">
                <i class="fa-solid fa-music text-white text-5xl mb-3"></i>
                <p class="text-white/80">添加音乐开始播放</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 最近添加 -->
      <div class="animate-fade-in" style="animation-delay: 0.2s">
        <div class="flex items-center justify-between mb-4">
          <h2 class="text-xl font-bold">最近添加</h2>
          <a href="#" class="text-primary text-sm font-medium hover:underline flex items-center opacity-50 cursor-not-allowed">
            <span>查看全部</span>
            <i class="fa-solid fa-chevron-right ml-1 text-xs"></i>
          </a>
        </div>
        
        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
          <!-- 专辑卡片 -->
          <div class="bg-white rounded-xl shadow-card overflow-hidden hover:shadow-card-hover transition-all duration-300 transform hover:-translate-y-1 opacity-50 cursor-not-allowed">
            <div class="relative">
              <img src="https://picsum.photos/300/300?random=5" alt="专辑封面" class="w-full aspect-square object-cover">
              <div class="absolute inset-0 bg-black/30 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center">
                <button class="w-12 h-12 bg-primary rounded-full flex items-center justify-center shadow-lg transform hover:scale-110 transition-transform">
                  <i class="fa-solid fa-play text-white"></i>
                </button>
              </div>
            </div>
            <div class="p-3">
              <h3 class="font-medium text-sm truncate">暂无专辑</h3>
              <p class="text-xs text-neutral-500 truncate">添加音乐以显示</p>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 音乐列表 -->
      <div class="bg-white rounded-xl shadow-card p-5 animate-fade-in" style="animation-delay: 0.3s">
        <div class="flex flex-col md:flex-row md:items-center justify-between mb-4">
          <h2 class="text-xl font-bold mb-2 md:mb-0">所有音乐</h2>
          <div class="flex items-center space-x-3">
            <div class="relative">
              <input type="text" id="music-search" placeholder="搜索音乐..." class="pl-10 pr-4 py-2 rounded-lg bg-neutral-100 text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 w-full md:w-64" disabled>
              <i class="fa-solid fa-search absolute left-3 top-1/2 -translate-y-1/2 text-neutral-500"></i>
            </div>
            <div class="flex items-center space-x-1">
              <button id="view-grid-btn" class="p-2 rounded-lg bg-neutral-100 text-neutral-600 hover:bg-neutral-200 transition-colors opacity-50 cursor-not-allowed">
                <i class="fa-solid fa-th-large"></i>
              </button>
              <button id="view-list-btn" class="p-2 rounded-lg bg-primary/10 text-primary hover:bg-primary/20 transition-colors opacity-50 cursor-not-allowed">
                <i class="fa-solid fa-list"></i>
              </button>
            </div>
          </div>
        </div>
        
        <div class="overflow-x-auto">
          <table class="w-full">
            <thead>
              <tr class="text-left text-neutral-500 text-sm border-b border-neutral-200">
                <th class="pb-3 font-medium w-12">
                  <input type="checkbox" class="rounded text-primary focus:ring-primary" disabled>
                </th>
                <th class="pb-3 font-medium">标题</th>
                <th class="pb-3 font-medium hidden md:table-cell">艺术家</th>
                <th class="pb-3 font-medium hidden sm:table-cell">专辑</th>
                <th class="pb-3 font-medium hidden lg:table-cell">时长</th>
                <th class="pb-3 font-medium text-right">操作</th>
              </tr>
            </thead>
            <tbody id="music-list">
              <!-- 空状态 -->
              <tr>
                <td colspan="6" class="py-12 text-center">
                  <div class="flex flex-col items-center">
                    <div class="w-16 h-16 bg-neutral-100 rounded-full flex items-center justify-center mb-4">
                      <i class="fa-solid fa-music text-2xl text-neutral-400"></i>
                    </div>
                    <h3 class="text-lg font-medium text-neutral-700 mb-1">暂无音乐文件</h3>
                    <p class="text-neutral-500 mb-4">请选择本地音乐目录或拖放音乐文件到此处</p>
                    <button id="empty-add-music-btn" class="py-2 px-4 bg-primary text-white rounded-lg font-medium hover:bg-primary/90 transition-all flex items-center space-x-2">
                      <i class="fa-solid fa-plus"></i>
                      <span>添加音乐</span>
                    </button>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </section>
  </main>

  <!-- 音乐播放器 -->
  <footer class="fixed bottom-0 left-0 right-0 bg-white shadow-player z-40 opacity-50 cursor-not-allowed">
    <div class="container mx-auto px-4">
      <div class="flex flex-col lg:flex-row items-center justify-between py-3">
        <!-- 当前播放音乐信息 -->
        <div class="flex items-center space-x-3 w-full lg:w-auto mb-3 lg:mb-0">
          <img id="current-track-cover" src="https://picsum.photos/40/40?random=12" alt="当前播放" class="w-12 h-12 rounded object-cover shadow-sm">
          <div class="hidden sm:block">
            <div id="current-track-title" class="font-medium text-sm">暂无播放</div>
            <div id="current-track-artist" class="text-xs text-neutral-500">添加音乐开始播放</div>
          </div>
          <button class="p-2 rounded-full hover:bg-neutral-100 text-neutral-600 transition-colors">
            <i class="fa-regular fa-heart"></i>
          </button>
        </div>
        
        <!-- 播放控制 -->
        <div class="flex flex-col items-center w-full lg:w-2/3">
          <div class="flex items-center space-x-6 mb-2">
            <button id="shuffle-btn" class="p-2 rounded-full hover:bg-neutral-100 text-neutral-600 transition-colors">
              <i class="fa-solid fa-random"></i>
            </button>
            <button id="prev-btn" class="p-2 rounded-full hover:bg-neutral-100 text-neutral-600 transition-colors">
              <i class="fa-solid fa-step-backward"></i>
            </button>
            <button id="play-pause-btn" class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center shadow-md hover:bg-primary/90 transition-all transform hover:scale-105">
              <i class="fa-solid fa-play"></i>
            </button>
            <button id="next-btn" class="p-2 rounded-full hover:bg-neutral-100 text-neutral-600 transition-colors">
              <i class="fa-solid fa-step-forward"></i>
            </button>
            <button id="repeat-btn" class="p-2 rounded-full hover:bg-neutral-100 text-neutral-600 transition-colors">
              <i class="fa-solid fa-repeat"></i>
            </button>
          </div>
          
          <div class="flex items-center space-x-2 w-full max-w-2xl">
            <span id="current-time" class="text-xs text-neutral-500">0:00</span>
            <div class="relative w-full h-1.5 bg-neutral-200 rounded-full cursor-pointer" id="progress-bar">
              <div class="absolute left-0 top-0 bottom-0 w-0 bg-primary rounded-full" id="progress-fill"></div>
              <div class="absolute left-0 top-1/2 -translate-y-1/2 w-3 h-3 bg-white rounded-full shadow-sm transform hover:scale-110 transition-transform" id="progress-dot"></div>
            </div>
            <span id="total-time" class="text-xs text-neutral-500">0:00</span>
          </div>
        </div>
        
        <!-- 音量控制 -->
        <div class="hidden lg:flex items-center space-x-3 w-auto">
          <button id="mute-btn" class="p-2 rounded-full hover:bg-neutral-100 text-neutral-600 transition-colors">
            <i class="fa-solid fa-volume-up"></i>
          </button>
          <div class="relative w-24 h-1.5 bg-neutral-200 rounded-full cursor-pointer" id="volume-bar">
            <div class="absolute left-0 top-0 bottom-0 w-[70%] bg-neutral-400 rounded-full" id="volume-fill"></div>
            <div class="absolute left-[70%] top-1/2 -translate-y-1/2 w-3 h-3 bg-white rounded-full shadow-sm transform hover:scale-110 transition-transform" id="volume-dot"></div>
          </div>
          <button id="playlist-btn" class="p-2 rounded-full hover:bg-neutral-100 text-neutral-600 transition-colors">
            <i class="fa-solid fa-list"></i>
          </button>
        </div>
      </div>
    </div>
  </footer>

  <!-- 音乐文件选择对话框 -->
  <div id="folder-select-modal" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center">
    <div class="bg-white rounded-xl shadow-lg w-full max-w-md p-6 animate-slide-up">
      <div class="flex items-center justify-between mb-4">
        <h3 class="text-lg font-semibold">选择音乐目录</h3>
        <button id="close-modal-btn" class="p-2 rounded-full hover:bg-neutral-100 transition-colors">
          <i class="fa-solid fa-times"></i>
        </button>
      </div>
      
      <div class="mb-6">
        <p class="text-neutral-600 mb-4">请选择包含音乐文件的文件夹，系统将自动扫描并导入所有支持的音乐文件。</p>
        
        <div class="border-2 border-dashed border-neutral-300 rounded-lg p-8 text-center hover:border-primary transition-colors cursor-pointer" id="drop-area">
          <i class="fa-solid fa-music text-3xl text-neutral-400 mb-2"></i>
          <p class="text-neutral-600 mb-1">拖放文件夹到此处</p>
          <p class="text-xs text-neutral-500">或者</p>
          <button id="browse-folder-btn" class="mt-2 text-primary font-medium hover:underline">浏览文件夹</button>
          <input type="file" id="file-input" class="hidden" webkitdirectory directory multiple>
        </div>
      </div>
      
      <div class="flex justify-end space-x-3">
        <button id="cancel-select-btn" class="py-2 px-4 border border-neutral-300 rounded-lg font-medium hover:bg-neutral-50 transition-colors">
          取消
        </button>
        <button id="confirm-select-btn" class="py-2 px-4 bg-primary text-white rounded-lg font-medium hover:bg-primary/90 transition-colors" disabled>
          确认
        </button>
      </div>
    </div>
  </div>

  <!-- 新建播放列表对话框 -->
  <div id="new-playlist-modal" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center">
    <div class="bg-white rounded-xl shadow-lg w-full max-w-md p-6 animate-slide-up">
      <div class="flex items-center justify-between mb-4">
        <h3 class="text-lg font-semibold">新建播放列表</h3>
        <button id="close-playlist-modal-btn" class="p-2 rounded-full hover:bg-neutral-100 transition-colors">
          <i class="fa-solid fa-times"></i>
        </button>
      </div>
      
      <div class="mb-6">
        <label for="playlist-name" class="block text-sm font-medium text-neutral-700 mb-2">播放列表名称</label>
        <input type="text" id="playlist-name" class="w-full px-4 py-2 rounded-lg border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-primary/30" placeholder="请输入播放列表名称">
        <p class="mt-2 text-xs text-neutral-500">播放列表名称不能为空</p>
      </div>
      
      <div class="flex justify-end space-x-3">
        <button id="cancel-playlist-btn" class="py-2 px-4 border border-neutral-300 rounded-lg font-medium hover:bg-neutral-50 transition-colors">
          取消
        </button>
        <button id="create-playlist-btn" class="py-2 px-4 bg-primary text-white rounded-lg font-medium hover:bg-primary/90 transition-colors">
          创建
        </button>
      </div>
    </div>
  </div>

  <!-- 音频元素 -->
  <audio id="audio-player" src=""></audio>
</body>
</html>  